<template>
    <div>
        <div class="applicationApiDemoCmsLoginBox">
            <div class="applicationApiDemoCmsLoginMain">
                <div class="applicationApiDemoCmsLoginTitle">登录</div>
                <div class="applicationApiDemoCmsLoginInputItem">
                    <input type="text" placeholder="请输入帐号"  />
                </div>
                <div class="applicationApiDemoCmsLoginInputItem">
                    <input type="password" placeholder="请输入密码"/>
                </div>
                <div class="applicationApiDemoCmsLoginInputSubmit">
                    <el-button type="primary" style="width:100%;">登录</el-button>
                    <span class="forgetPasswordText"><a href="#">忘记密码？</a></span>
                    <span class="registerText"><a href="#">未注册，点击注册</a></span>
                </div>

                <div class="api_border_box api_1_location" @click="showApiInfo(1)">
                    <div class="api_border_box_text api_1_text">点击查看该部分Api</div>
                    <div class="api_border_box_number">1</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods : {
        showApiInfo(){
            this.$EventBus.$emit("cms_showApiInfoPreview",'menu_search');
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.applicationApiDemoCmsLoginBox {
    width 100%
    height 500px
    background #f5f5f5
    text-align center
    font-size 16px

    .applicationApiDemoCmsLoginMain {
        width 400px
        height 360px
        position absolute
        top 50%
        left 50%
        background #fff
        margin-left -200px
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        margin-top -180px
        border-radius 5px
    }

    .applicationApiDemoCmsLoginTitle {
        width 100%
        height 50px
        line-height 70px
        font-size 20px
        float left
    }

    .applicationApiDemoCmsLoginInputSubmit {
        width 100%
        height 70px
        position absolute
        padding-left 20px
        padding-right 20px
        box-sizing border-box
        bottom 20px

        a {
            color #999
        }

        span {
            font-size 13px
            color #999
            margin-top 15px
        }

        .forgetPasswordText {
            float left
        }

        .registerText {
            float right
        }
    }

    .applicationApiDemoCmsLoginInputItem {
        width 100%
        height 40px
        float left
        padding-left 20px
        padding-right 20px
        box-sizing border-box
        padding-top 20px
        padding-bottom 20px
        margin-bottom 20px

        input {
            width 100%
            height 40px
            border 1px solid #ddd
            border-radius 5px
            padding-left 15px
            box-sizing border-box
            outline none

        }
    }

    .api_border_box {
    position: absolute;
    border: 1px dashed #ccc;
    cursor: pointer;
    z-index: 999;
    color: #ffffff;
    text-align: center;

    .api_border_box_text {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0.01;
    }

    .api_border_box_number {
      position: absolute;
      width: 15px;
      height: 15px;
      right: 0px;
      top: 0px;
      background: #999;
    }
  }

  .api_1_location {
    width: 94%;
    height: 50px;
    left: 12px;
    bottom: 45px;

    &:hover {
      background-color: rgba(0, 0, 0, 0.5);

      .api_border_box_text {
        opacity: 1;
      }
    }
  }

  .api_1_text {
    line-height: 50px;
  }
}
</style>
